<template>
  <div class="member_manage">
    <div class="member_header">
      <el-input v-model="userlist.userName" placeholder="请输入用户名" style="width: 200px;" class="filter_item"
        @keyup.enter.native="handleFilter" />
      <el-input v-model="userlist.mobile" placeholder="请输入手机号" style="width: 200px;" class="filter_item"
        @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter_item filter_item_button" type="primary" icon="el-icon-search"
        @click="handleFilter">
        查找
      </el-button>
      <el-button v-waves :loading="downloadLoading" class="filter_item filter_item_button" type="primary"
        icon="el-icon-download" @click="handleDownload">
        导出
      </el-button>
    </div>
    <div class="member_list_table">
      <!-- border 是否含有纵向边框 fit 列宽是否自撑开 highlight-current-row 高亮当前选中行-->
      <el-table v-loading="listLoading" :data="list" border fit highlight-current-row @sort-change="sortChange">
        <!-- id列 -->
        <el-table-column label="用户ID" prop="id" sortable="custom" align="center" width="120">
          <template slot-scope="{row}">
            <span class="test">{{ row.id }}</span>
          </template>
        </el-table-column>
        <!-- 用户名 -->
        <el-table-column label="用户名" width="300" align="center">
          <template slot-scope="{row}">
            <span class="test">{{ row.username }}</span>
          </template>
        </el-table-column>
        <!-- 手机号码 -->
        <el-table-column label="手机号码" width="300" align="center">
          <template slot-scope="{row}">
            <span class="test">{{ row.mobile }}</span>
          </template>
        </el-table-column>
        <!-- 性别 0为未知 1为男,2为女 -->
        <el-table-column label="性别" width="250" align="center">
          <template slot-scope="{row}">
            <el-tag :type="row.gender === 1 ? '' : 'danger'" v-if="row.gender">{{
              row.gender === 1 ? '男' : '女'
            }}</el-tag>
            <el-tag v-else>未知</el-tag>
          </template>
        </el-table-column>
        <!-- 生日 -->
        <el-table-column label="生日" align="center">
          <template slot-scope="{row}">
            {{ birthdayDispose(row.birthday) }}
          </template>
        </el-table-column>
        <!-- 用户等级 -->
        <el-table-column label="用户等级" width="300" align="center">
          <template slot-scope="{row}">
            <el-tag :type="row.userLevel ? '会员' : '普通用户'">{{ row.userLevel ? '会员' : '普通用户' }}</el-tag>
          </template>
        </el-table-column>
        <!-- 状态 -->
        <el-table-column label="状态" width="300" align="center">
          <template slot-scope="{row}">
            <el-tag :type="row.status == 0 ? '可用' : '不可用'">{{ row.status == 0 ? '可用' : '不可用' }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="table_stepper">
      <pagination v-show="total > 0" :total="total" :page.sync="userlist.page" :limit.sync="userlist.limit"
        :pageSizes="userlist.pageSizes" @pagination="getList" />
    </div>
  </div>
</template>

<script>
import { getMemberList } from '@/api/member'
import Pagination from '@/components/Pagination'
export default {
  name: "MemberManage",
  data() {
    return {
      listLoading: false,// 未获取数据前,显示加载中
      downloadLoading: false,//控制按钮加载中
      list: [],//表格数据
      total: 2,//数据总数
      userlist: {//过滤栏和分页器栏数据
        userName: null,
        mobile: null,
        page: 1,//前往第几页
        limit: 5,
        pageSizes: [5, 10, 15, 20],
        order: 'desc',//按id排序,id大的后添加,默认返回顺序视觉效果为倒序,过此处顺倒序反写
        sort: '+id',//按id升序排序
      }
    }
  },
  components: {
    Pagination
  },
  beforeMount() {
    this.getList()
  },
  methods: {
    handleDownload() {//导出执行
      this.downloadLoading = true//开启导出按钮的loading状态
    },
    handleFilter() {
      this.userlist.page = 1//改变当前页至第一页
      this.getList()//再次获取列表数据
    },
    getList() {
      this.listLoading = true//数据回来前显示为加载中
      getMemberList({
        page: this.userlist.page,
        limit: this.userlist.limit,
        username: this.userlist.userName,
        mobile: this.userlist.mobile,
        sort: 'add_time',
        order: this.userlist.order == 'desc' ? 'asc' : 'desc',
      }).then(res => {
        this.list = res.data.items
        this.total = res.data.total

        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    sortChange(data) {//表格列排序改变触发,参数为一个对象,里面有三个数据:column, prop, order,column是当前列,prop是当前列的prop,order是 排序的规则（升序、降序和默认[默认就是没排序]）
      const { prop, order } = data
      if (prop === 'id') {//如果是id列使表格改变
        this.sortByID(order)
      }
    },
    sortByID(order) {
      if (order === 'ascending' || order === null) {//如果改变的值是升序排列
        this.userlist.order = 'desc'//
      } else {//降序
        this.userlist.order = 'asc'
      }
      this.handleFilter()
    },
    // 生日数据处理
    birthdayDispose(str) {
      let newArr = str.split('-').filter((item, index) => index >= 1)
      return newArr[0] + '月' + newArr[1] + '日'
    }
  }
}
</script>

<style lang="less">
.member_manage {
  padding: 20px;
}

.member_header {
  margin-bottom: 20px;
}

.filter_item {
  margin-right: 5px;

  &.filter_item_button {
    background-color: #409eff;
  }
}

.test {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>